// 放大镜 构造函数
class SetGlass{
    constructor( element , array ){
        // 通过 属性 存储 参数
        this.ele = element;
        this.arr = array;
        // 获取需要的数据
        this.show = this.ele.querySelector('.show');
        this.img = this.show.querySelector('img');
        this.mask = this.ele.querySelector('.mask');
        
        this.glass = this.ele.querySelector('.glass');
        // 提前定义变量储存数据
        this.ulli;
        // 获取的标签的数据

        // 父级标签的外边距
        this.left = this.ele.offsetLeft;
        this.top = this.ele.offsetTop;

        // 边框线 当前是加给 show 的
        this.borderLeft = this.show.clientLeft;
        this.borderTop = this.show.clientTop;

        // show 的 内容+padding
        this.showWidth = this.show.clientWidth;
        this.showHeight = this.show.clientHeight;

        // 遮盖层的占位
        this.maskWidth = parseInt( myGetStyle( this.mask , 'width' ) );
        this.maskHeight = parseInt( myGetStyle( this.mask , 'height' ) );

        // 放大镜的宽高
        this.glassWidth = parseInt( myGetStyle( this.glass , 'width' ) );
        this.glassHeight = parseInt( myGetStyle( this.glass , 'height' ) );

        // 背景图片的大小
        this.res = myGetStyle( this.glass , 'backgroundSize' ) ;
        this.glassBH = parseInt( this.res.substring( this.res.indexOf(' ')+1 ) );
        this.glassBW = parseInt( this.res.substring( this.res.indexOf(' ') , -1 ) );


    }

    // 入口函数
    init(){
        console.log( this.glassBH );
        console.log( this.glassBW );

        this.setPage();
        this.setInOut();
       
        this.setMove();
    }

    // 1, 动态生成
    setPage(){
        // 1, show中img标签src属性
        //    glass中背景图片url属性
        // 是 数组中 第一个单元 图片信息
        this.img.setAttribute( 'src' , `${this.arr[0].large}` );
        this.glass.style.backgroundImage = `url('${this.arr[0].large}')`;

        
    }

    // 2, 鼠标移入移出
    setInOut(){
        // 移入移出的是 显示区域

        // 移入显示
        this.show.addEventListener('mouseenter' , ()=>{
            // 遮盖层 和 放大区域显示
            this.mask.style.display = 'block';
            this.glass.style.display = 'block';
        })
        // 移出消失
        this.show.addEventListener('mouseleave' , ()=>{
            // 遮盖层 和 放大区域显示
            this.mask.style.display = 'none';
            this.glass.style.display = 'none';
        })
    }

    // 3, 选型卡切换效果
    

    // 4, 鼠标拖拽效果
    setMove(){
        this.show.addEventListener( 'mousemove' , e=>{
            // 计算 定位数值
            let x = e.pageX - this.left - this.borderLeft - this.maskWidth/2;
            let y = e.pageY - this.top - this.borderTop - this.maskHeight/2;

            // 计算极值
            x = x < 0 ? 0 : x;
            y = y < 0 ? 0 : y;

            x = x > this.showWidth - this.maskWidth ? this.showWidth - this.maskWidth : x; 
            y = y > this.showHeight - this.maskHeight ? this.showHeight - this.maskHeight : y;
            
            // 定位赋值
            this.mask.style.left = x + 'px';
            this.mask.style.top = y + 'px';

            // 背景图片 定位 方向相反 数值是 4倍
            this.glass.style.backgroundPosition = `-${x*4}px -${y*4}px`;

        })
    }
}
